<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common" th:with="title='角色列表'"></head>
<body class="hold-transition skin-blue sidebar-mini">
	<div th:include="main-header"></div>
	<input type="hidden" id="removeRoleId" />
	<div class="content-wrapper">
		<section class="content">
			<div id="page-wrapper">
				<div class="panel panel-default">
					<div class="row">
						<div class="col-lg-12">
							<div class="panel-heading">角色查询</div>
							<div class="panel-body">
								<div class="row">
									<div class="col-lg-3">
										<div class="form-group">
											<input type="text" name="rolename" id="rolenamesk"
												class="form-control" placeholder="角色名称" />
										</div>
									</div>
									<div class="col-lg-3">
										<div class="form-group">
											<button type="button" onclick="refresh();"
												class="btn btn-primary">查询</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="row">
						<div class="col-lg-12">
							<!-- /.panel-heading -->
							<div class="panel-body">
								<div id="toolbar" class="btn-group">
									<button id="btn_add" type="button" style="width: 100px;"
										class="btn btn-primary">新增</button>
								</div>
								<table id="datatable" class="table table-bordered table-hover"></table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
	<div th:include="model"></div>
	<div th:include="main-footer"></div>
	<script type="text/javascript">
		initBootstrapTable();
		function initBootstrapTable(){
			$('#datatable').bootstrapTable({
			    url: '/role/data',
				classes:'table table-hover table-no-bordered',
				method:'post',
				pagination:true,
				search:false,
				sidePagination:"server",
				minimumCountColumns:10,
				clickToSelect:true,
				uniqueId:'id',
				paginationPreText:"上一页",
				paginationNextText:"下一页",
				toolbar: '#toolbar',
				showRefresh:false,
				showToggle:false,
				showPaginationSwitch:false,
				showColumns:false,
				pageNumber:1,
                pageSize: 10, /*每页的记录行数*/
                pageList: [10,15,20,30], /*可供选择的每页的行数*/
				queryParamsType:'',
				contentType:"application/x-www-form-urlencoded",
				queryParams:queryParams,
			    columns: [{
				        field: 'id',
				        title: '角色id'
				    }, {
				        field: 'rolename',
				        title: '角色名称'
				    }, {
				        field: 'secrecy',
				        title: '是否隐藏敏感信息',
				        formatter: function (value) {
		                    if(value==0)return '否';
		                    if(value==1)return '是';
		                }
				    }, {
				        field: 'id',
				        title: '操作',
				        formatter:function (value, row, index){
				        	var del = '<a href="javascript:void(0);" onclick="del('+row.id+');">删除</a>'
				        	var edi = '<a href="javascript:void(0);" onclick="edit('+row.id+');">授权</a>';
			                return edi+' '+del;
			            }
				    }, ]
			});
		}
		function del(data){
			$("#removeRoleId").val(data);
	        $('#delModal .modal-body').html("<p>您确认要删除吗？</p> ");
	        $('#delModal').modal({keyboard : true, backdrop : true});
		}
		
		$("#delButton").click(function(){
			confirmDelItem();
        });
		
		function confirmDelItem() {
	        var data = {};
	        data.id = $.trim($("#removeRoleId").val());
	        $.ajax({
	            type: 'POST',
	            url: '/role/remove',
	            data: data,
	            async: false,
	            success:function(data) {
	                $('#delModal').modal('hide');
	                if(data) {
	                    var obj = eval("("+data+")");
	                    if(obj[0].code == 1) {//操作成功
	                        refresh();
	                    }else {//操作失败
	                        alert("删除失败");
	                    }
	                }
	            },
	            error:function() {
	                $('#delModal').modal('hide');
	            }
	        });
	        refresh();
	    }
		function queryParams(params) {
	        var temp = {
	            pageSize: params.pageSize,
	            pageNumber: params.pageNumber,
	            rolename:$("#rolenamesk").val(),
	        };
	        return temp;
	    }
		$("#btn_add").click(function() {
			$('#addModalTitle').text('新增');
			remoteFormUrl();
		});
		function edit(id){
			$('#addModalTitle').text('编辑');
			remoteFormUrl(id);
		};
		function remoteFormUrl(data){
			$('#addModal .modal-body').html('');
			let url = '/role/form';
			if (data) {
				url = '/role/form?id='+data;
			}
			$.get(url, function(data){
				$('#addModal .modal-body').html(data);
			})
			$('#addModal').modal({keyboard : true, backdrop : true})
		}
		function refresh(){
		    $('#datatable').bootstrapTable('refresh');
		}
		$("#addButton").click(function(){
			var nodes = $.fn.zTree.getZTreeObj("menutree").getChangeCheckedNodes();
			var ids  = new Array();
			var pids = new Array();
			for(var i=0;i<nodes.length;i++){
				ids.push(nodes[i].id);
                pids.push(nodes[i].id)
			}
			ids = JSON.stringify(ids);
			$.ajax({
				type : "POST",
				url : "/role/add",
				data : {'id':$('#id').val(),'rolename':$('#rolename').val(),'secrecy':$('#secrecy').val(),'midl':ids},
				dataType : "json",
				async: false,
				success : function(data) {
					if (data.code == 1) {//操作成功
						$('#addModal').modal('toggle');
						refresh();
					} else {//操作失败
						$("#msg").html(data.msg);
					}
				}
			});
		})
	</script>
</body>
</html>